<template>
  <div>
    <div class="row minw100">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">              
          <div class="portlet-body">
            
            <div class="row mr0 focusNone">
              <div class="col-md-6 color">
                  <div class="col-md-3 l10">
                    <span class="require">*</span>
                      推送时间 :
                  </div>
                  <div class="col-md-9">
                  逾期
                    <el-input-number size="mini" @change="handleChange" :min="1" v-model="num7"></el-input-number>  
                    天
                  
                  </div>
                  <span class="errorInfor errorAddress hide">不能为空</span>
                </div>
                <div class="col-md-6 color">
                  <div class="col-md-3 l10">
                    <span class="require">*</span>  
                    推送对象 :
                  </div>
                  <div class="col-md-9">
                    <el-transfer
                      filterable
                      :filter-method="filterMethod"
                      filter-placeholder="请输入城市拼音"
                      v-model="value2"
                      :data="data2">
                    </el-transfer>
                    
                  </div>
                  <span class="errorInfor errorName hide">不能为空</span>
                </div>
                <div class="col-md-12" style="position: relative;left: -76px !important;">
                <div class="col-md-2" style="font-weight: 500;color: #666;">
                  推送文本信息 :
                </div>
                <div class="col-md-10" style="font-weight: 500;color: #333;">
                  <textarea v-model="extra_desc" class="form-control" rows="3" :readonly="is_modifly" style="resize: none;width: 823px;position: relative;left: -44px;" placeholder="备注"></textarea>
                </div>
              </div>
              

              <div class="col-md-12" style="position: relative;margin-top: 20px;">
                <div style="text-align: center;">
                  <button type="button" v-if="type=='update'"@click="saveData($event)" class="btn blue">保存</button>
                  <button type="button" v-if="type=='add'" @click="next($event)" class="btn blue">下一步</button>
                  <router-link to="/rtugl" tag="a" class="btn default">
                    返回
                  </router-link>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>


    
  </div>

</template>

<style scoped>
  .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
    input.form-control,.bs-select.form-control{width: 95%;display: inline;}
    .col-md-9{color: #333;font-weight: 500;}
      .col-md-6.color{margin-bottom: 10px;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .col-md-6.color .col-md-3{color: #666;font-weight: 500;position: relative;top: 5px;}
    .numData{font-size: 16px;}
    .col-md-12.color .col-md-3{margin-bottom: 10px;}
    .tree-view-item-key {
      font-size: 20px;
      color: black;
    }
    .portlet.box>.portlet-body {
        background-color: #fff;
        padding: 65px 10px;
    }

    .tree-view-item-value {
        font-size: 20px;
        font-weight: bold;
        color: white;
    }
    /*.col-md-6.top{position: relative;top: -70px;}*/
    .errorInfor {
        right: 40px;
    }
    .tsdx{padding: 15px 10px;border: 1px solid #bfcbd9;width: 94%;}
    .tsdxL{}
    .tsdxL li{float: left;padding: 5px 10px;font-weight: 500;color: #fff;border-radius: 3px !important;position: relative;margin-right: 5px;background: #20a0ff;margin-bottom: 10px;}
    .tsdxL li .close{position: absolute;;right: 2px;top: 2px;width: 10px;}
    .tsdxL li .close:hover{cursor: pointer;}
    .halo-tree{position: relative;}
    .deptDiv{position: absolute;left: 15px;right: 15px;top: 34px;z-index:100;background: #fff;border: 1px solid #dbdbdb;border-top:none;padding: 0 12px;}
    .focusNone{width: 1000px;margin: 0 auto;}
    input.form-control,.bs-select.form-control{width: 100%;}
    .el-radio{display: block;margin-left: 15px;margin-bottom: 10px;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>
<style>
  el-input-number--mini {width: 130px;line-height: 34px;}

  .el-input-number--mini .el-input__inner {padding-left: 35px;padding-right: 35px;}
  .el-input--mini .el-input__inner {height: 36px;text-align: center;font-size: 14px;}
  .el-input-number--mini .el-input-number__decrease, .el-input-number--mini 
  .el-input-number__increase {
    width: 36px;
    font-size: 12px;
    height: 34px;line-height: 34px;
  }
  .el-input-number__decrease {
    left: 1px;
    border-radius: 4px 0 0 4px !important;
    border-right: 1px solid #d8dce5;
    border-left: 0;
    left:1px;
  }
  .el-icon-minus:before,.el-icon-plus:before {color: #999;}
</style>
<script>

  import '../../../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import Metronic from '../../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../../static/js/pages/tips.js';
  import ComponentsPickers from '../../../../../../static/js/pages/components-pickers.js';
  import optVue from '../../../../../config/optVue.js';

  export default {
    data(){
      const generateData2 = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
          cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return{
        type:'',
        is_modifly:true,
        title:"",
        data2: generateData2(),
        value2: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        }

      }
    },
    components: {
        
    },
    mounted(){
      document.title = '模板任务计划管理';
      this.title = document.title;
      var that = this;

      this.type = this.$route.query.type;
      var dataArr = {
        ril : "S"
      }
      optVue.getFjListgl(this,dataArr);
      if(this.type=='update'){ //修改
        this.rtu_id = window.localStorage.getItem('rtu_id');
        optVue.getModifyRTU(this,this.rtu_id);
        this.is_modifly = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
      }

      if(this.type=='infor'){ //修改

        this.rtu_id = window.localStorage.getItem('rtu_id');
        optVue.getModifyRTU(this,this.rtu_id);
        this.is_modifly = true;
      }
      

      if(that.type!='infor'){
        $('.date-picker1').datepicker({
          rtl: Metronic.isRTL(),
          orientation: "left",
          autoclose: true,
          format: "yyyy-mm-dd"
        }).on('changeDate',function(){
          that.mfg_date = $(this).val();
        }); 
        $('.date-picker2').datepicker({
            rtl: Metronic.isRTL(),
            orientation: "left",
            autoclose: true,
            format: "yyyy-mm-dd"
          }).on('changeDate',function(){
            that.exp_date = $(this).val();
        });
      
      }
      
      $(function(){
        // ComponentsPickers.init();
        
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));
     
      })
    },
    methods:{     
      
      changeSelect:function(select){
        this.room_id = select;
        console.log(this.room_id)
        if(this.room_id != -1){
          $(".errorZt").addClass("hide");
          $(".errorZt").closest(".col-md-6").find("input").removeClass("errorInput");
        }
      },
   
     
      leaderPe:function(e){
        this.status = $(e.currentTarget).find("input").val();

      },
     
      inputFunc:function(e){
        if($.trim($(e.target).val())!=""){
          $(e.target).closest(".col-md-6").find(".errorInfor").addClass("hide");
          $(e.target).closest(".col-md-6").find("input").removeClass("errorInput")
          
        }
      },
      isValidate:function(e){
        var res = true;
        if(this.rtu_name==""){
          $(".errorName").removeClass("hide");
          $(".errorName").closest(".col-md-6").find("input").addClass("errorInput");
          res = false;
        }

        if(this.rtu_no==""){
          $(".errorNo").removeClass("hide");
          $(".errorNo").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
       

        if(this.room_id==-1){
          $(".errorZt").removeClass("hide");
          $(".errorZt").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }
        if(this.ip==""){
          $(".errorIp").removeClass("hide");
          $(".errorIp").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
        if(this.port==""){
          $(".errorPort").removeClass("hide");
          $(".errorPort").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
        return res;
      },
      saveData:function(e){
        
        if(this.isValidate(e)){
          var dataArr = {
            rtu_name:this.rtu_name,
            rtu_no:this.rtu_no,
            room_id:this.room_id,
            ip:this.ip,
            port:this.port,
            status:this.status,
            mfg_date:this.mfg_date,
            exp_date:this.exp_date,
            mfg_company:this.mfg_company,
            extra_desc:this.extra_desc
          }

          console.log(JSON.stringify(dataArr))
          optVue.addModifyRtu(this,dataArr,Tips,this.rtu_id);
        } 
      },
      check:function(item){
        console.log(JSON.stringify(item))
      },
      handleChange(value) {
        console.log(value);
      },

    }
    
  }   


</script>



